<template>
  <div :class="['message', isMe ? 'isMe' : '']">
    <div class="message-card">
      <span class="info">
        {{ info || 'test11111fasefasefasefasefasfgsrgdrg' }}
      </span>
      <span class="time">
        {{ time || '10:24' }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  info: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  },
  time: {
    type: String,
    default: ''
  },
  isMe: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.message {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}

.message:is(.isMe) {
  justify-content: flex-end;
}

.isMe .message-card {
  background-color: #ccf2cf;
}

.message-card {
  position: relative;
  padding: 2px 10px;
  align-items: end;
  border-radius: 5px;
  background-color: #f2f2f2;
  min-height: 40px;
  max-width: 70%;

  display: flex;
  flex-direction: column;
}

.info {
  font-size: 14px;
}

.time {
  color: rgb(130, 140, 148);
  font-size: 10px;
}
</style>
